<template>
	<view :style="[AppSkinVar]" class="bg-white e-p-l-60 e-p-r-60 e-p-t-60 vh-100">
		<view class="tab-view e-flex" v-if="userInfo.phone && userInfo.email">
			<view class="e-flex-1 e-rela e-flex e-flex-xy-center e-font-32 c-666 keep-all" :class="{'c-333 fw-600': tabIndex === 1}" @tap="tabIndex = 1">
				{{$t('public.手机')}}
				<view class="tab-line" :style="{background: AppSkin.primary}" v-if="tabIndex === 1">
					
				</view>
			</view>
			<view class="e-flex-1 e-rela e-flex e-flex-xy-center e-font-32 c-666" :class="{'c-333 fw-600': tabIndex === 2}" @tap="tabIndex = 2">
				{{$t('public.邮箱')}}
				<view class="tab-line" :style="{background: AppSkin.primary}" v-if="tabIndex === 2">
					
				</view>
			</view>
		</view>
		<view class="h-100 e-flex">
			<image class="img-36 e-m-r-30" src="../static/public/phone.png"></image>
			<text v-if="tabIndex == 1">{{userInfo.phone}}</text>
			<text v-if="tabIndex == 2">{{userInfo.email}}</text>
		</view>
		<view class="item-box h-100 e-m-t-20 e-flex">
			<image class="img-36  e-m-r-30" src="../static/public/shield.png"></image>
			<e-input type="number" v-model="formData.validCode" border="none" :placeholder="$t('public.请输入验证码')" />
			<e-code-button ref="eCodeRef"  :start-text="$t('public.获取验证码')"
				:change-text="$t('public.X秒重新获取')" :end-text="$t('public.重新获取')" size="small" type="primary" shape="circle"
				 @click="getCode"></e-code-button>
		</view>
		<view class="item-box h-100 e-m-t-20 e-flex">
			<image class="img-36  e-m-r-30" src="../static/public/password.png"></image>
			<e-input  v-model="formData.onePassword" border="none" password :placeholder="$t('public.6-12位字母与数字组合')" />
		</view>
		<view class="item-box h-100 e-m-t-20 e-flex">
			<image class="img-36  e-m-r-30" src="../static/public/password.png"></image>
			<e-input  v-model="formData.twoPassword" border="none" password :placeholder="$t('setting.请重新输入密码')" />
		</view>
		<view class="item-box e-p-t-60">
			<view class="sub-btn bg-primary e-flex-xy-center"  :class="{ 'is-ok': !isOk }" @tap="submit">
				<text>{{ $t('common.确认') }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	
	import { computed, ref,watch  } from 'vue'
	import {
		useI18n,
		useCurrentInstance
	} from '@/common/hooks'
	import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'
	import { useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		updatePassword,postPasswordSms
	} from '@/common/request/api'

	
	const ctx = useCurrentInstance()
	
	const userStore = useUser()
	const { userInfo } = storeToRefs(userStore)
	
	const loading = ref(false)
	const tabIndex = ref(1)
	const codeTips = ref("")
	const isOk = ref(false)
	const formData = ref({
					validCode: null,
					onePassword: '',
					twoPassword: ''
				})
	
	
	
	onLoad(() => {
		if (!userInfo.value.phone && userInfo.value.email) {
			tabIndex.value = 2
		}
	})
	watch(formData.value, (newVal:any,oldVal:any) => {
		for (let i in newVal) {
			if (!newVal[i]) {
				isOk.value = false
				return
			} else {
				isOk.value = true
			}
		}
	})
	const eCodeRef = ref<CodeInstance>()
	const getCode = () => {
		let params:string
			if (tabIndex.value == 1) {
				params = userInfo.value.phone
			} else {
				params = userInfo.value.email
			}
			const data = {
				areaCode: userInfo.value.countryArea
			}
			postPasswordSms(params,data).then(res => {
				eCodeRef.value?.start?.()
				
			})
	}
	
	const codeChange = (text:string) => {
		codeTips.value = text
	}
	
	const submit = () => {
		if (!isOk.value) return
		if(formData.value.twoPassword !== formData.value.onePassword ){
			ctx.$toastApp(ctx.$t('public.两次密码不一致'))
			return
		}
		const reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
		if (!reg.test(formData.value.onePassword)) {
			ctx.$toastApp(ctx.$t('setting.密码不规范'))
			return
		}
		const params = {
			username: tabIndex.value == 1 ?  userInfo.value.phone : userInfo.value.email,
			password: formData.value.onePassword,
			validcode: formData.value.validCode
		}
		if (loading.value) return
		loading.value = true
		updatePassword(params).then((res:any) => {
			if (res.code == 200) {
				const title = ctx.$t('setting.修改成功')
				ctx.$toast(title, 'success')
				ctx.$back()
			}
		}).finally((() => {
			loading.value = false
		}))
	}

</script>

<style lang="scss" scoped>
	.vh-100 {
		height:100vh;
	}
	.h-100 {
		height: 100rpx;
	}
	.w-140 {
		width: 140rpx;
	}
	.item-box {
		box-shadow: 0px -1px 0px 0px #EDEFF3;
	}
	.code-btn {
		height: 62rpx;
		line-height: 62rpx;
		letter-spacing: 2rpx;
		border-radius: 31px;
	}
	.sub-btn {
		height: 100rpx;
		line-height: 100rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
		border-radius: 45rpx;
		margin: auto;
	}
	.tab-view {
		width: 100%;
		padding:0 70rpx 70rpx;
		.tab-line {
			position: absolute;
			left: 50%;
			bottom: -20rpx;
			transform: translateX(-50%);
			width: 54rpx;
			height: 8rpx;
			border-radius: 8rpx;
		}
	}
</style>
